<template>
	<view class="container">
		<u-sticky customNavHeight="0">
			<view class="header">
				<view class="u-flex u-flex-items-center tabs">
					<view class="u-flex u-flex-items-center u-flex-center tabs_item Medium" :class="[tabIndex==0?'on':'']" :data-index="0" @click="tabClick">按店面检索</view>
					<u-line color="#D7D7D7" length="32rpx" direction="col"></u-line>
					<view class="u-flex u-flex-items-center u-flex-center tabs_item Medium" :class="[tabIndex==1?'on':'']" :data-index="1" @click="tabClick">按活动店面检索</view>
				</view>
				<view class="u-flex u-flex-items-center search_bar">
					<view class="search_icon">
						<u-icon size="20" color="#999999" name="search"></u-icon>
					</view>
					<u--input v-model="keyword" fontSize="26rpx" :customStyle="{flex:'1',color:'#333333'}" placeholder="请输入店面名称" placeholderStyle="color:#999999;" border="none"></u--input>
					<u-line color="#D7D7D7" length="32rpx" direction="col"></u-line>
					<u-button text="查询" :hairline="false" :customStyle="{width:'100rpx',height:'60rpx',color:'#4179FF',background:'#FFFFFF',fontSize:'26rpx',border:'none',marginRight:'20rpx'}" @click="search"></u-button>
				</view>
			</view>
		</u-sticky>
		<block v-if="tabIndex===0">
			<view class="shops_box">
				<u-collapse accordion :border="false">
					<block v-for="(item, index) in listStore" :key="item.id">
						<u-collapse-item :border="false" :clickable="false" style="background-color: #FFFFFF;border-radius: 12rpx;margin-bottom: 20rpx;">
							<view slot="title" class="u-flex u-flex-items-center">
								<uni-icons size="20" color="#333333" custom-prefix="iconfont" type="icon-dianmian"></uni-icons>
								<text class="title Medium">{{item.name}}</text>
							</view>
							<view class="u-flex u-flex-items-center u-flex-between shops_row">
								<view class="name">店面地址:</view>
								<view class="u-flex u-flex-items-center">
									<text class="content">{{item.address}}</text>
								</view>
							</view>
							<view class="u-flex u-flex-items-center u-flex-between shops_row">
								<view class="name">市场老师:</view>
								<view class="u-flex u-flex-items-center">
									<text class="content">{{item.createName}}</text>
								</view>
							</view>
							<view class="u-flex u-flex-items-center u-flex-between shops_row">
								<view class="name">负责人姓名:</view>
								<view class="u-flex u-flex-items-center">
									<text class="content">{{item.leaderName}}</text>
								</view>
							</view>
							<view class="u-flex u-flex-items-center u-flex-between shops_row">
								<view class="name">负责人电话:</view>
								<view class="u-flex u-flex-items-center">
									<text class="content">{{item.phone}}</text>
								</view>
							</view>
							<view class="u-flex u-flex-items-center u-flex-end shops_row">
								<u-button size="large" text="确认" :hairline="false" :customStyle="{width:'140rpx',height:'56rpx',lineHeight:'56rpx',color:'#4179FF',background:'#EAF0FF',fontSize:'28rpx',border:'none',margin:'0 0 0 20rpx'}" @click="selectShops(item)"></u-button>
							</view>
						</u-collapse-item>
					</block>
				</u-collapse>
			</view>
		</block>
		<block v-if="tabIndex===1">
			<view v-for="(item, index) in listActivity" :key="item.id" class="shop">
				<view class="shop_infos">
					<view class="u-flex u-flex-items-center shop_row">
						<view class="left_space">
							<uni-icons size="20" color="#333333" custom-prefix="iconfont" type="icon-dianmian"></uni-icons>
						</view>
						<view class="shop_name Medium">{{item.storeiName}}</view>
					</view>
					<view class="u-flex u-flex-items-center shop_row">
						<view class="left_space"></view>
						<view class="shop_info">活动时间：{{item.activityStartTime?item.activityStartTime.substring(0,10):''}} 至 {{item.activityEndTime?item.activityEndTime.substring(0,10):''}}</view>
					</view>
					<view class="u-flex u-flex-items-center shop_row">
						<view class="left_space"></view>
						<view class="shop_info">店面地址：{{item.activityAddress}}</view>
					</view>
				</view>
				<u-line color="#DDDDDD"></u-line>
				<view class="u-flex u-flex-items-center u-flex-end shop_btns">
					<u-button size="large" text="确认" :hairline="false" :customStyle="{width:'140rpx',height:'56rpx',lineHeight:'56rpx',color:'#4179FF',background:'#EAF0FF',fontSize:'28rpx',border:'none',margin:'0 0 0 20rpx'}" @click="selectShops(item)"></u-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		findStorefrontInfo,
		getActivityStoreList,
		checkStore
	} from '@/config/api.js';
	export default {
		data() {
			return {
				tabs: [{
					name: '按店面检索',
				}, {
					name: '按活动店面检索',
				}],
				tabIndex: 0,
				keyword: '',
				listStore: [], //按店面搜索列
				listActivity: [], //按活动日搜索列
				pageStore: 1, //按店面页码
				pageActivity: 1, //按活动日页码
				limit: 20
			};
		},
		onLoad(options) {
			var that = this;
			if (that.tabIndex === 0) {
				that.getListStore('init');
			} else if (that.tabIndex === 1) {
				that.getListActivity('init');
			}
		},
		onPullDownRefresh() {
			var that = this;
			if (that.tabIndex === 0) {
				that.initStore();
				that.getListStore('init');
			} else if (that.tabIndex === 1) {
				that.initActivity();
				that.getListActivity('init');
			}
		},
		onReachBottom() {
			var that = this;
			if (that.tabIndex === 0) {
				that.getListStore('loadmore');
			} else if (that.tabIndex === 1) {
				that.getListActivity('loadmore');
			}
		},
		methods: {
			initStore() {
				var that = this;
				that.pageStore = 1;
				that.listStore = [];
			},
			initActivity() {
				var that = this;
				that.pageActivity = 1;
				that.listActivity = [];
			},
			tabClick(e) {
				var that = this;
				let index = e.currentTarget.dataset.index;
				that.tabIndex = index;
				if (that.tabIndex === 0) {
					that.initStore();
					that.getListStore('init');
				} else if (that.tabIndex === 1) {
					that.initActivity();
					that.getListActivity('init');
				}
			},
			search() {
				var that = this;
				if (that.tabIndex === 0) {
					that.initStore();
					that.getListStore('init');
				} else if (that.tabIndex === 1) {
					that.initActivity();
					that.getListActivity('init');
				}
			},
			getListStore(status) {
				var that = this;
				let page = status == 'loadmore' ? that.pageStore + 1 : 1;
				let params = {
					token: that.vuex_token,
					createBy: that.vuex_userId,
					status: 102,
					isOwn: 100,
					name: that.keyword,
					page: page,
					limit: that.limit
				};
				findStorefrontInfo(params).then(res => {
					if (res.data.storefrontInfoList.length > 0) {
						that.pageStore = page;
						if (status == 'init') {
							that.listStore = res.data.storefrontInfoList;
						} else if (status == 'loadmore') {
							that.listStore = that.listStore.concat(res.data.storefrontInfoList);
						}
					} else {
						uni.$u.toast(res.msg);
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('findStorefrontInfo=', err);
					uni.stopPullDownRefresh();
				});
			},
			getListActivity(status) {
				var that = this;
				let page = status == 'loadmore' ? that.pageActivity + 1 : 1;
				let params = {
					token: that.vuex_token,
					userId: that.vuex_userId,
					userType: that.vuex_user.userType,
					storeName: that.keyword,
					page: page,
					limit: that.limit
				};
				getActivityStoreList(params).then(res => {
					if (res.data.length > 0) {
						that.pageStore = page;
						if (status == 'init') {
							that.listActivity = res.data;
						} else if (status == 'loadmore') {
							that.listActivity = that.listStore.concat(res.data);
						}
					} else {
						uni.$u.toast(res.msg);
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('getActivityStoreList=', err);
					uni.stopPullDownRefresh();
				});
			},
			selectShops(item) {
				var that = this;
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				let storeId = that.tabIndex === 0 ? item.id : that.tabIndex === 1 ? item.storeId : '';
				let storeName = that.tabIndex === 0 ? item.name : that.tabIndex === 1 ? item.storeiName : '';
				let ua = window.navigator.userAgent.toLowerCase();
				checkStore({
					token: that.vuex_token,
					storeId: storeId
				}).then(res => {
					if (res.data.isUse) {
						if (that.tabIndex === 0) {
							prevPage.$vm.storeId = item.id;
							prevPage.$vm.storeName = item.name;
						} else if (that.tabIndex === 1) {
							prevPage.$vm.storeId = item.storeId;
							prevPage.$vm.storeName = item.storeiName;
						}
						uni.$u.route({
							type: 'navigateBack'
						});
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '当前活动暂不支持此方式进行收款，点击确认后系统会为您自动切换到正确收款方式',
							showCancel: true,
							success: function(e) {
								if (e.confirm) {
									let formData = {
										amountCollected: prevPage.$vm.amount,
										moneyIn: prevPage.$vm.singleAmount,
										storeId: storeId,
										storeName: storeName,
										moneyInShow: prevPage.$vm.isSingle
									};
									if (ua.match(/MicroMessenger/i) == 'micromessenger') {
										wx.miniProgram.redirectTo({
											url: `/evilsDragSorts/paymentSystem/paymentSystem?pagefrom=activityShop&storeInfo=${JSON.stringify(item)}&formData=${JSON.stringify(formData)}`, //指定跳转至小程序页面的路径
											success: function() {
												console.log('success'); //页面跳转成功的回调函数
											}
										});
									} else {
										uni.webView.redirectTo({
											url: `/evilsDragSorts/paymentSystem/paymentSystem?pagefrom=activityShop&storeInfo=${JSON.stringify(item)}&formData=${JSON.stringify(formData)}`, //指定跳转至小程序页面的路径
											success: function() {
												console.log('success'); //页面跳转成功的回调函数
											}
										});
									}
								}
							}
						});
					}
				}).catch(err => {
					console.log('checkStore=', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;

		.container {
			padding-bottom: 2rpx;

			.header {
				padding-bottom: 20rpx;
				background-color: #F4F4F4;

				.tabs {
					height: 96rpx;

					.tabs_item {
						flex: 1;

						font-size: 30rpx;
						color: #666666;
					}

					.on {
						color: #4179FF;
					}
				}

				.search_bar {
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 35rpx;
					margin: 0 20rpx;

					.search_icon {
						margin-left: 26rpx;
						margin-right: 8rpx;
					}
				}
			}

			.shops_box {
				padding: 0 20rpx;

				.title {
					padding: 10rpx 0;
					font-size: 28rpx;
					color: #333333;
					line-height: 32rpx;
					margin-left: 20rpx;
				}

				.shops_row {
					padding: 30rpx 0;
					border-top: 2rpx solid #E1E1E1;

					.name {
						color: #333333;
						font-size: 28rpx;

						line-height: 32rpx;
					}

					.content {

						font-size: 28rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
			}

			.shop {
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin: 20rpx auto;

				.shop_infos {
					padding: 10rpx 0;

					.shop_row {
						margin: 20rpx 0;

						.left_space {
							width: 54rpx;
						}

						.shop_name {

							font-size: 30rpx;
							color: #333333;
							line-height: 34rpx;
						}

						.shop_info {

							font-size: 28rpx;
							color: #999999;
							line-height: 32rpx;
						}
					}
				}

				.shop_btns {
					height: 95rpx;
				}
			}
		}
	}
</style>